<template xmlns:border-radius="">
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input v-model="query.productCode" clearable size="small" placeholder="输入产品编码搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
        <el-input v-model="query.productName" clearable size="small" placeholder="输入产品名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
        <el-date-picker
          v-model="query.createTime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <rrOperation :crud="crud" />
      </div>
    </div>
    <el-dialog title="产品详情" :visible.sync="dialogVisible " :fullscreen="true">
      <el-form :inline="true" :model="productDetails" class="demo-form-inline">
        <el-form-item label="产品编码" label-width="160px">
          <el-input :disabled="true" v-model="productDetails.productCode"></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input :disabled="true" v-model="productDetails.productName"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="productDetails" class="demo-form-inline">
        <el-form-item label="创建时间" label-width="160px">
          <el-input :disabled="true" v-model="productDetails.createTime"></el-input>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input :disabled="true" v-model="productDetails.updateTime"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="productDetails" class="demo-form-inline">
        <el-form-item label="产品状态" label-width="160px">
          <el-input :disabled="true" :placeholder="runStatusFormat(productDetails)"></el-input>
        </el-form-item>
        <el-form-item label="运行时间">
          <el-input :disabled="true" v-model="productDetails.runTime"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :title="productGroupTitle" :visible.sync="dialogVisibleGroup" :fullscreen="true">
      <el-form :inline="true" :model="productGroupDetails" class="demo-form-inline">
        <el-form-item label="分组编码" label-width="160px">
          <el-input :disabled="true" v-model="productGroupDetails.productGroupCode"></el-input>
        </el-form-item>
        <el-form-item label="分组名称">
          <el-input :disabled="true" v-model="productGroupDetails.productGroupName"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="productGroupDetails" class="demo-form-inline">
        <el-form-item label="模型代码" label-width="160px">
          <el-input :disabled="true" v-model="productGroupDetails.modelCode"></el-input>
        </el-form-item>
        <el-form-item label="模型名称">
          <el-input :disabled="true" v-model="productGroupDetails.modelName"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="productGroupDetails" class="demo-form-inline">
        <el-form-item label="数据源" label-width="160px">
          <el-input :disabled="true" v-model="productGroupDetails.source"></el-input>
        </el-form-item>
        <el-form-item label="源表名">
          <el-input :disabled="true" v-model="productGroupDetails.sourceTableName"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="productGroupDetails" class="demo-form-inline">
        <el-form-item label="目标表名" label-width="160px">
          <el-input :disabled="true" v-model="productGroupDetails.tableName"></el-input>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item align="center">
          <el-col :span="20">
            <el-table
              ref="selection"
              :data="form.selectArr"
              border
              style="width: 60%">
              <el-table-column
                prop="field"
                label="字段名称"
                width="100"
              />
              <el-table-column
                prop="type"
                label="类型"
                width="100"
              />
              <el-table-column
                label="中文名称"
                prop="cname"
              />
            </el-table>
          </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--表格渲染-->
    <el-table ref="table" :data="productData" v-loading="crud.loading" default-expand-all row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
      <el-table-column label="产品编码" prop="productCode"/>
      <el-table-column label="产品名称" prop="productName"/>
      <el-table-column label="产品分组" prop="productGroup">
        <template slot-scope="scope">
          <el-button @click="handleProductGroup(scope.row.productGroup)" type="text" size="small">{{scope.row.productGroup}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"/>
      <el-table-column label="更新时间" prop="updateTime"/>
      <el-table-column label="产品状态" prop="runStatus" :formatter="runStatusFormat"/>
      <el-table-column label="运行时间(ms)" prop="runTime"/>
      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">详情列表</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import crudDept from '@/api/management/dataconfig'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '数据模型注册', url: '', crudMethod: { ...crudDept }})
const defaultForm = { id: null, name: null, pid: 1, enabled: 'true' }
export default {
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  components: { rrOperation },
  // 设置数据字典
  dicts: ['dataconfig_status'],
  data() {
    return {
      dialogVisible: false,
      dialogVisibleGroup: false,
      productGroupTitle: '',
      productGroupDetails: {},
      productDetails: {
      },
      productData: [{
        productCode: 'p001',
        productName: '信贷1',
        productGroup: '分组1',
        createTime: '2020-01-01 12:00:00',
        updateTime: '2020-01-01 12:00:00',
        runStatus: 3,
        runTime: '12'
      }, {
        productCode: 'p002',
        productName: '信贷2',
        productGroup: '分组1',
        createTime: '2020-01-01 12:00:00',
        updateTime: '2020-01-01 12:00:00',
        runStatus: 2,
        runTime: '12'
      }, {
        productCode: 'p003',
        productName: '信贷3',
        productGroup: '分组2',
        createTime: '2020-01-01 12:00:00',
        updateTime: '2020-01-01 12:00:00',
        runStatus: 0,
        runTime: '12'
      }, {
        productCode: 'p004',
        productName: '信贷4',
        productGroup: '分组2',
        createTime: '2020-01-01 12:00:00',
        updateTime: '2020-01-01 12:00:00',
        runStatus: 1,
        runTime: '12'
      }],
      productGroups: [{
        productGroupCode: '分组1',
        productGroupName: '分组1',
        modelCode: '模型代码',
        modelName: '模型名称',
        source: '数据源',
        sourceTableName: '源表名',
        tableName: '目标表名'
      }, {
        productGroupCode: '分组2',
        productGroupName: '分组2',
        modelCode: '模型代码',
        modelName: '模型名称',
        source: '数据源',
        sourceTableName: '源表名',
        tableName: '目标表名'
      }
      ]
    }
  },
  methods: {
    cannel() {
      this.crud.cancelCU()
    },
    // 查看详情
    handleClick(row) {
      this.productDetails = row
      this.dialogVisible = true
    },
    // 查看分组详情
    handleProductGroup(val) {
      // eslint-disable-next-line no-undef
      for (let i = 0; i < this.productGroups.length; i++) {
        if (val === this.productGroups[i].productGroupCode) {
          this.productGroupDetails = this.productGroups[i]
          this.productGroupTitle = val + '详情'
          this.dialogVisibleGroup = true
          return
        }
      }
    },
    runStatusFormat(row) {
      if (row.runStatus === 0) {
        return '运行失败'
      } else if (row.runStatus === 1) {
        return '运行成功'
      } else if (row.runStatus === 2) {
        return '运行中'
      } else if (row.runStatus === 3) {
        return '未运行'
      }
    }
  }
}
</script>

<style scoped>
  .opSetting{
    text-align: center;
    margin-top:30px;
  }
  .spacing{
    margin-top:10px;
  }
</style>
